iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0

前情提要

「咦,今天怎麼又多了一隻新的艾草,戳一下。」今天了昨天的磨難,看到多一隻新的艾草我已經習以為常了。

「啥啦,不要亂戳他,我會有感覺耶!」艾草碎念道。

「ㄟˊ 我戳昨天那隻你好像就沒啥感覺?」

「這次用不同方法仿製的,不ㄧ樣!」

「居然還有不一樣的方法~~快點分享給我聽。」

https://ithelp.ithome.com.tw/upload/images/20220928/20139066m6PNiQc0Lp.png

(趁艾草滔滔不絕的講課時偷戳兩下 (◉3◉)


spyOn

今天來嘗試將昨天的範例程式碼,透過 spyOn 的方式改寫,spyOnjest.fn() 相似都可以模擬函式,與之不同的是 spyOn 會真的去執行該函式。

spyOn 需帶入兩個參數:

jest.spyOn(object, methodName)
  1. 物件名稱
  2. 物件內的方法名稱

接下來來改寫昨天的範例程式碼,將範例程式碼的 checkRareMagicAttributes 放到一個物件內:

const quizList = [
  {
    name: "艾草",
    attributes: "木"
  },
  {
    name: "Vivian",
    attributes: "火"
  },
  {
    name: "啾啾",
    attributes: "光"
  }
];
// 確認是否為稀有魔法屬性
const object = {
  checkRareMagicAttributes: (attributes) => {
    if (attributes === "光" || attributes === "暗") {
      return true;
    } else {
      return false;
    }
  }
}
// 確認屬性稀有屬性人數
function calculateRareAttributesTotal(data) {
  let total = 0;
  data.forEach((item) => {
	// 透過 checkRareMagicAttributes 的回傳值為 true / false 判斷是否為光暗屬性
    if (checkRareMagicAttributes(item.attributes)) {
      total += 1;
    }
  });
  return total;
}

當針對 calculateRareAttributesTotal 撰寫測試且希望有去執行 checkRareMagicAttributes 函式時,可以透過 spyOn 來幫忙實現:

  1. 首先透過 spyOn ,並帶入物件名稱及方法名稱 checkRareMagicAttributes

    test("Introducing spyOn", () => {
    	// arrange
      const spyOnFunction = jest.spyOn(object,"checkRareMagicAttributes");
    });
    
  2. 接著透過 result 來執行行動

    test("Introducing spyOn", () => {
    	// arrange
      const spyOnFunction = jest.spyOn(object,"checkRareMagicAttributes");
      // act
      const result = calculateRareAttributesTotal(quizList);
    });
    
  3. 斷言結果:可以透過 calculateRareAttributesTotal 回傳值及 toHaveBeenCalledTimes 來判斷是否有成功呼叫 spyOnFunction 來斷言,這邊因為資料有三筆物件,所以共呼叫了三次 spyOnFunction

    test("Introducing spyOn", () => {
    	// arrange
      const spyOnFunction = jest.spyOn(object,"checkRareMagicAttributes");
      // act
      const result = calculateRareAttributesTotal(quizList);
      // assert
      expect(result).toBe(1);
      expect(spyOnFunction).toHaveBeenCalledTimes(3);
    });
    

像這樣就透過 spyOn 模擬成功!

可用 mockRestore() 恢復原始函式

spyOn 也可以使用 mock 的方法如 mockImplementation 等模擬回傳函式,而當想調用原始函式而不掉用模擬函式時 spyOn 還可以使用 mockRestore() 的方式將模擬的函式改回原本函式,可用於多個測試其中一項須改回原本函式時。

明天要來學習 mockjest.fn() 方法與 spyOn 的區別!


參考文章

https://jestjs.io/docs/jest-object#jestspyonobject-methodname
https://medium.com/enjoy-life-enjoy-coding/jest-jojo是你-我的替身能力是-mock-4de73596ea6e
https://www.youtube.com/watch?v=1Xafx6o82Aw&ab_channel=SoftwareTestingHelp
https://dwatow.github.io/2020/04-24-jest/jest-doc-5/


上一篇
用 Mock 來模擬一個函式
下一篇
jest.fn()、 spyOn 差異
系列文
<< 測試魔法 >> 這能動嗎?不然就測測看好了!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言